<template>
  <view class="not-login">
    <customHeader :isCustomBack="true" @back="handleBackPrevPage" />
    <view class="not-login-title" :style="titleTopBgStyle" />
    <view class="not-login-main">
      <image :src="NOT_LOGIN_DEFAULT" />
      <view class="not-login-main__desc">你还没有登录，请登录</view>
      <input v-model="midPhone" placeholder="请输入电话" />
      <button class="get-info" @tap="handleGetUserInfo">
        登录
      </button>
      <!-- 
        @getphonenumber="handleGetPhoneNumber" -->
      <!--  @tap="handleGetUserInfo"
        open-type="getPhoneNumber"
        @getphonenumber="handleGetPhoneNumber"
         -->
      <at-toast
        :is-opened="is_opened"
        :text="toastText"
        :on-close="handleCloseToast"
      />
      <!--  
      -->
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import customHeader from "@/components/custom-header";
import { NOT_LOGIN_DEFAULT } from "./image-url";
import { getMiniProgramInfo, getMiniProgramPhone } from "@/libs/api/base-api";
import { getUserInfo } from "@/libs/api/login";
import { hasBackgroundBgTitleStyle, getInviteId } from "@/libs/util";
import basicDataSet from "@/config/basic-data-set";

/**顶部背景图 */
const TOP_BG =
  "http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/public/20201130/1606702955865.png";
export default {
  components: {
    customHeader
  },
  data() {
    return {
      NOT_LOGIN_DEFAULT,
      midPhone: "",
      appInfo: {}
    };
  },
  computed: {
    titleTopBgStyle() {
      return hasBackgroundBgTitleStyle(TOP_BG, 0, 618);
    }
  },
  onShow() {
    this.handleLogin();
  },

  methods: {
    /**右上角返回 */
    handleBackPrevPage() {
      Taro.navigateBack({
        delta: 1,
        success: () => {
          /**解决返回来回切换的问题 */
          Taro.eventCenter.trigger("handleGetIsLogin", 1);
        }
      });
    },
    handleGetPhoneNumber({ detail: { encryptedData, iv } }) {
      if (!encryptedData || !iv) return;
      const loginInfo = Taro.getStorageSync("session_key");
      const query = {
        sessionKey: loginInfo.session_key,
        encryptedData,
        iv
      };
      if (this.isLoading) return;
      this.$startLoading("登录中");
      this.isLoading = true;
      getMiniProgramPhone(query)
        .then(({ data: { purePhoneNumber = "" } = {} }) => {
          this.handleGetUserInfo(purePhoneNumber);
        })
        .catch(({ message }) => {
          this.$message(message);
          this.isLoading = false;
          this.$endLoading();
        });
    },
    /**登录 */
    handleLogin() {
      Taro.login({
        success: async ({ code }) => {
          try {
            Taro.setStorageSync("login_code", code);
            const { data } = await getMiniProgramInfo({ code });
            this.appInfo = data;
            if (data.session_key) {
              Taro.setStorageSync("session_key", data);
            }
          } catch ({ message }) {
            this.$message(message);
          }
        }
      });
    },
    handleToPageCatch() {
      if (Taro.getCurrentPages().length < 2) {
        Taro.switchTab({
          url: "/pages/index/index"
        });
        return;
      }
      Taro.navigateBack({
        delta: 1
      });
    },
    async handleGetUserInfo(phone) {
      this.$startLoading("登录中");
      const loginInfo = Taro.getStorageSync("session_key");
      const query = {
        openid: loginInfo.openid,
        phone: this.midPhone,
        invite_user_id: getInviteId()
      };
      try {
        const {
          data: { isJump, student, is_have = false, token = "" } = {}
        } = await getUserInfo(query);
        this.isLoading = false;
        this.$endLoading();
        if (!isJump && token) {
          Taro.setStorageSync("token", token);
          basicDataSet.setUser();
          /**处理跳转异常的情况 */
          this.handleToPageCatch();
          return;
        }
        const studentInfo = JSON.stringify({
          ...student,
          ...query,
          is_have: Number(is_have)
        });
        Taro.navigateTo({
          url: `/pages/login-perfect/perfect-info/index?student=${studentInfo}`
        });
      } catch ({ message }) {
        this.$message(message);
        this.isLoading = false;
        this.$endLoading();
      }
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.not-login {
  &-title {
    height: 746px;
    @include setBgi(
      "http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/public/20201130/1606702955865.png"
    );
  }
  .custom-header {
    position: absolute;
    top: 0;
  }
  &-main {
    position: absolute;
    width: 400px;
    top: 50%;
    left: 50%;
    transform: translate3D(-50%, -50%, 0);
    image {
      width: 374px;
      height: 200px;
      vertical-align: top;
      margin-bottom: 32px;
    }
    &__desc {
      margin-bottom: 32px;
      line-height: 40px;
      text-align: center;
      @include base-text(40px, 28px, #909399, 400);
    }
    .get-info {
      width: 400px;
      height: 88px;
      line-height: 88px;
      text-align: center;
      font-size: 32px;
      color: #ffffff;
      border-radius: 44px;
      @include setBgi(
        "http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/1607952163808_0.4758202261146729"
      );
    }
    input {
      margin: 0 auto;
      margin-bottom: 30px;
      background-color: #eeeeee;
    }
  }
}
</style>
